<template>
  <view class="page-wrapper">
    <view class="p-10" style="padding: 10px 60px; padding-top: 20vh;">
      <view>
        <view style="margin-bottom: 5px;" class="txt-info">登录名</view>
        <view>
          <u-input v-model="accountName" class="form-input" color="#ffffff" />
        </view>
      </view>
      <view class="m-t-10">
        <view style="margin-bottom: 5px;" class="txt-info">密码</view>
        <view>
          <u-input v-model="accountPwd" type="password" class="form-input" color="#ffffff" />
        </view>
      </view>
      <view style="margin-top: 30px;">
        <view class="btn primary large" style="margin: 0px; border-radius: 5px;" @click="signup">登录</view>
      </view>
      <view style="margin-top: 10px;">
        <view class="btn info large plain" style="margin: 0px; border-radius: 5px;" @click="signin">注册</view>
      </view>
    </view>
  </view>
</template>

<script>
  import md5 from 'md5'
  import { mapMutations } from 'vuex'
  import { getAccountName, setToken, setAccountName, setExpiration } from '@/utils/auth'
  export default {
    data() {
      return {
        accountName: '',
        accountPwd: ''
      }
    },
    onLoad() {
      const accountName = getAccountName()
      if (accountName) {
        this.accountName = accountName;
      } else {
        this.accountName = ''
      }
    },
    methods: {
      signup() {
        this.$api.access.login({
          accountName: this.accountName,
          accountPwd: md5(this.accountPwd)
        })
        .then(res => {
          if (res.code == 200) {
            let globalData = getApp({allowDefault: true}).globalData
            globalData.userName = res.data.accountName
            globalData.role = res.data.role
            setExpiration(+new Date() + ( 12 * 3600 * 1000 ))
            setToken(res.data.token)
            setAccountName(res.data.accountName)
            uni.redirectTo({ url: '/pages/home/home' })
          } else {
            uni.showModal({
              title: '提示',
              content: res.message,
              showCancel: false,
              success: ({ confirm, cancel }) => {}
            })
          }
        })
      },
      signin() {
        uni.navigateTo({ url: '/pages/signIn/signIn' })
      }
    },
  }
</script>

<style lang="scss" scoped>
.page-wrapper {
  width: 100vw;
  height: 100vh;
  background: url('@/static/image/bg.jpg');
  background-size: 180% auto;
  background-position: -120px 00px;
}

.txt-info {
  color: #ffffff;
}

.form-input {
  background: hsla(192, 40, 90, 0.3);
  
  >>> .u-input__content__field-wrapper__field {
    color: #ffffff !important; 
  }
}
</style>